<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>MyPetStore</title>
<!--    <link rel="StyleSheet" href="../css/jpetstore.css" type="text/css" media="screen"/>-->
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>
    <link rel="stylesheet" href="../css/main.css"/>
    <noscript>
        <link rel="stylesheet" href="../css/noscript.css"/>
    </noscript>
</head>
<body class="is-preload">

<div id="wrapper">
    <div th:replace="common/top">

    </div>
    <section id="banner" class="style2">
        <div class="inner">
							<span class="image">
								<img src="../images/pic07.jpg" alt=""/>
							</span>
        </div>
    </section>

    <div id="main">

        <section id="two" class="spotlights">
            <section th:each="product:${productList}">
                <a th:href="@{/catalog/viewProduct(productId=${product.productId})}" class="image">
                    <img src="../images/pic08.jpg" alt="" data-position="center center"/>
                </a>
                <div class="content">
                    <div class="inner">
                        <header class="major">
                            <h3 th:text="${product.productId}">productId</h3>
                        </header>
                        <p th:text="${product.name}">Product Name</p>
                        <ul class="actions">
                            <li><a th:text="${product.productId}" th:href="@{/catalog/viewProduct(productId=${product.productId})}" class="button">Learn more</a></li>
                        </ul>
                    </div>
                </div>
            </section>

        </section>
    </div>
    <div th:replace="common/bottom">

    </div>
</div>

</body>
</html>